<template>
  <video ref="video" controls style="width: 100%; height: 100%;">
    <source :src="src" type="application/x-mpegURL">
  </video>
</template>

<script>
import Hls from 'hls.js';

export default {
  props: ['src', 'isError'],
  mounted() {
    if (Hls.isSupported() &&!this.isError) {
      const hls = new Hls();
      hls.loadSource(this.src);
      hls.attachMedia(this.$refs.video);
    }
  },
  beforeUnmount() {
    if (this.$refs.video && this.$refs.video.hls) {
      this.$refs.video.hls.destroy();
    }
  }
};
</script>

<style scoped>

</style>